<template>
  <el-row class="mg">
    <el-col :span="12">
      <label class="label">&nbsp;<el-icon><AlarmClock /></el-icon>&nbsp;练习历史&nbsp;&nbsp;&nbsp;&nbsp;</label>
    </el-col>

    <el-col :span="12" class="d1">
      <a href="#" class="alink" @click="showDrawer">&nbsp;全部&nbsp;<el-icon><Position /></el-icon>&nbsp;</a>
    </el-col>

    <el-col :span="24" class="mg d2" v-if="exam_history.length !== 0" v-for="(item,index) in exam_history" :key="index">
      <el-row>
        <el-col :span="18">
          <label>{{ item[0] }}</label><br><br>
          <el-tag class="ml-2" type="success">考试时间</el-tag>
          <span class="sp">&nbsp;{{ item[1] }}</span><br><br>
        </el-col>
        <el-col :span="6" class="btnd">
          <el-button type="default" size="small" round @click="getExamDetial(index)">考试详情</el-button>
        </el-col>
      </el-row>
    </el-col>

    <el-col :span="24" class="mg d2" v-else>
      <el-row>
        <el-col :span="24" class="sp1">
          ＞︿＜ 还没有考试数据哦
        </el-col>
      </el-row>
    </el-col>

  </el-row>

  <el-row class="mg">
    <el-col :span="24">
      <el-row>
        <el-col :span="24">
          <label class="label">&nbsp;<el-icon><Connection /></el-icon>&nbsp;数据&nbsp;&nbsp;&nbsp;&nbsp;</label>
        </el-col>
      </el-row>
      <el-row class="mg dataP">
        <el-col :span="12">
          <span class="sp1"><el-icon class="ic"><CircleClose /></el-icon>&nbsp;错题</span>
        </el-col>
        <el-col :span="12" class="d3">
          <span>236</span>
        </el-col>
      </el-row>

      <el-row class="mg dataP">
        <el-col :span="12">
          <span class="sp1"><el-icon class="ic1"><Comment /></el-icon>&nbsp;笔记</span>
        </el-col>
        <el-col :span="12" class="d3">
          <span>236</span>
        </el-col>
      </el-row>

      <el-row class="mg dataP">
        <el-col :span="12">
          <span class="sp1"><el-icon class="ic2"><StarFilled /></el-icon>&nbsp;收藏</span>
        </el-col>
        <el-col :span="12" class="d3">
          <span>236</span>
        </el-col>
      </el-row>
    </el-col>
  </el-row>

  <el-drawer v-model="drawer" direction="rtl">
    <template #header>
      <label>全部考试数据</label>
    </template>
    <template #default>
      <el-row>
        <el-col :span="24">
          <div class="div_drawer_1" style="height: 80vh">
            <div class="mg div_drawer_2" v-if="exam_history.length !== 0" v-for="(item,index) in all_exam_history" :key="index">
              <el-row>
                <el-col :span="18">
                  <label>{{ item[0] }}</label><br><br>
                  <el-tag class="ml-2" type="success">考试时间</el-tag>
                  <span class="sp">&nbsp;{{ item[1] }}</span><br><br>
                </el-col>
                <el-col :span="6" style="text-align: right">
                  <el-button type="default" size="small" round @click="getExamDetial(index)" class="btn">考试详情</el-button>
                  <br>
                  <br>
                    <el-popover :visible="visibleList[index]" :id="index" trigger="click" placement="top" :width="160" >
                      <p><el-icon style="color: orange"><Warning /></el-icon>&nbsp;确定要删除吗？</p>
                      <div style="text-align: right; margin: 0">
                        <el-button size="small" round text @click="visibleList[index] = false">取消</el-button>
                        <el-button size="small" round type="primary" @click="deleteExamDetail(index)"
                        >确认</el-button>
                      </div>
                      <template #reference>
                        <el-button type="default" size="small" class="btn_delete" round @click="showConfirm(index)"><el-icon><CloseBold /></el-icon></el-button>
                      </template>
                    </el-popover>
                </el-col>
              </el-row>
            </div>
          </div>

        </el-col>
      </el-row>
    </template>
  </el-drawer>

  <div>
    <el-dialog v-model="dialogFormVisible" title="考试数据" style="border-radius: 20px">
      <div style="overflow-y:scroll;max-height: 60vh;border-radius: 20px" v-if="dialogFormVisible">
        <el-row>
          <el-col :span="24" class="mg">
            <div class="div-detail">
              <label class="labelt">&nbsp;&nbsp;本次考试统计数据&nbsp;&nbsp;&nbsp;</label>
              <div class="div-detail_1">
                <el-row>
                  <el-col :span="12">
                    <span>开始时间：{{showData.begin_time}}</span><br>
                    <span>交卷时间：{{showData.exam_date}} </span><br>
                  </el-col>
                  <el-col :span="12">
                    <div style="text-align: right">
                      <span>客观题得分：</span>
                      <span style="font-size: 50px;font-weight: bolder;color:orange">{{ showData.right_score }}</span><span>/{{showData.all_right_score }}</span>
                    </div>
                  </el-col>
                  <el-col :span="24">
                    <hr>
                  </el-col>
                </el-row>
                <el-row class="mg" style="text-align: center">
                  <el-col :span="6">
                    <el-statistic title="题量" :value="showData.detial.length"/>
                  </el-col>
                  <el-col :span="6">
                    <el-statistic :value="statisticData.over_count">
                      <template #title>
                        <div style="display: inline-flex; align-items: center">
                          完成情况
                        </div>
                      </template>
                      <template #suffix>/ {{showData.detial.length }}</template>
                    </el-statistic>
                  </el-col>
                  <el-col :span="6">
                    <el-statistic title="客观题正确率" :value="statisticData.right_count">
                      <template #suffix>
                        /{{statisticData.objective_question_count}}
                      </template>
                    </el-statistic>
                  </el-col>
                  <el-col :span="6">
                    <el-statistic title="耗时/限时" :value="statisticData.total_min">
                      <template #suffix>
                        / {{paper.duration }}min
                      </template>
                    </el-statistic>
                  </el-col>
                </el-row>
              </div>
            </div>
            <el-row class="mg">
              <el-col :span="24">
                <div class="div-detail">
                  <label class="labelt">&nbsp;&nbsp;试卷详情&nbsp;&nbsp;&nbsp;</label>
                  <div class="div-detail_1">

                    <div class="demo-collapse">
                      <el-collapse>
                        <el-collapse-item v-for="(item,index) in showData.detial" :name="index">
                          <template #title>
                            <div class="collDiv" v-if="paper.questions[index].type_number == 3"
                                 style="background: #dfe6e9">
                        <span
                            style="margin-left: 1vw;font-weight: bold;color:black"> {{index + 1 }}. {{paper.questions[index].question }}</span>
                              <el-tag class="ml-2">主观题</el-tag>
                            </div>

                            <div class="collDiv" v-if="paper.questions[index].type_number != 3"
                                 :style="item[2] ? 'background:#9AECDB' : 'background:#f7d794'">
                        <span
                            style="margin-left: 1vw;font-weight: bold;color:black"> {{index + 1 }}. {{paper.questions[index].question }}</span>
                              <el-icon style="color: green" v-if="item[2]"><Select/></el-icon>
                              <el-icon style="color: red" v-if="!item[2]">
                                <CloseBold/>
                              </el-icon>
                            </div>

                          </template>
                          <div class="collDivInner">
                            <el-tag class="ml-2" type="warning">你的答案：</el-tag>
                            &nbsp;
                            &nbsp;
                            <span v-if="item[1] != null">
                        <span v-if="paper.questions[index].type_number != 4">
                         {{item[1][1] }}
                        </span>
                        <span v-else>
                          <span v-if="item[1][1] != ''">
                             {{item[1][1] }}
                          </span>
                          <span v-else>未作答</span>
                        </span>
                        </span>
                            <span v-else>未作答</span>
                            <br>
                            <el-tag class="ml-2">正确答案：</el-tag>
                            &nbsp;
                            &nbsp;
                            <span v-if="item[0] != null">
                         {{item[0][1] }}
                        </span>
                          </div>
                          <div class="collDivInner_2">
                            <el-tag class="ml-2" type="success">解析：</el-tag>
                            {{paper.questions[index].correct_answer}}
                          </div>
                        </el-collapse-item>
                      </el-collapse>
                    </div>
                  </div>
                </div>
              </el-col>
            </el-row>
          </el-col>
        </el-row>
      </div>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
import {ref,reactive,watch} from "vue";
import useShowPageStore from "../store/showPageStore"
const sp = useShowPageStore()
const exam_history = ref()
const all_exam_history = ref()
const drawer = ref(false)
const paper = ref()
const examData = ref()
const showData = ref([])
const statisticData = ref([])
const visible = ref(false)
const visibleList = ref([])


const dialogFormVisible = ref(false)

if (localStorage.getItem("exam_d")){
  let exam_d = JSON.parse(localStorage.getItem("exam_d"))
  all_exam_history.value = exam_d
  visibleList.value = new Array(all_exam_history.value.length)
  if (exam_d.length > 4){
    exam_d = exam_d.slice(0, 4)
  }
  exam_history.value = exam_d
}
else {
  exam_history.value = []
  all_exam_history.value = []
}

const showDrawer = () => {
  drawer.value = true
}

const getExamDetial = async (index)=> {
  let jsonExam_d = JSON.parse(localStorage.getItem("exam_d"))
  paper.value = await myApi.getPaper(jsonExam_d[index][2])
  examData.value = await myApi.getPaper("exam_"+jsonExam_d[index][2])
  let id = jsonExam_d[index][3]

  for (let i = 0; i < examData.value.data.length; i++) {
    if (examData.value.data[i].id === id){
      showData.value = examData.value.data[i]
      break
    }
    else {
      showData.value = []
    }
  }
  let count1 = 0
  let count2 = 0
  let count3 = 0
  for (let i = 0; i < showData.value.detial.length; i++) {
    if (showData.value.detial[i][1] != null){
      if (paper.value.questions[i].type_number != 4){
        count1++
      }
      else {
        if (showData.value.detial[i][1][1] != ""){
          count1++
        }
      }
    }
    if (paper.value.questions[i].type_number != 3){

      if (showData.value.detial[i][2] == true){
        count2++

      }
      count3++
    }
  }
  const startTime = new Date(showData.value.begin_time);
  const endTime = new Date(showData.value.exam_date);
  const timeDiff = endTime - startTime;
  const hours = Math.floor(timeDiff / (1000 * 60 * 60));
  const minutes = Math.floor((timeDiff % (1000 * 60 * 60)) / (1000 * 60));
  const totalMin = hours*60 + minutes;
  let d1 = JSON.parse("{\"over_count\": "+count1+",\"right_count\" :"+count2+",\"objective_question_count\" :"+count3+ ",\"total_min\" :"+ totalMin+"}")
  statisticData.value = d1
  dialogFormVisible.value = true
}

const showConfirm = (index) => {
  for (let i = 0; i < visibleList.value.length; i++) {
    visibleList.value[index] = false
  }
  visibleList.value[index] = true
}
const deleteExamDetail = async (index) => {
  visibleList.value[index] = false
  let json_data = JSON.parse(localStorage.getItem("exam_d"))
  examData.value = await myApi.getPaper("exam_"+json_data[index][2])
  if (exam_history.value.length < index){
    exam_history.value.splice(index,1)
  }
  all_exam_history.value.splice(index,1)
  json_data.splice(index, 1);
  examData.value.data.splice(index,1)
  localStorage.removeItem("exam_d")
  localStorage.setItem("exam_d",JSON.stringify(json_data))
  await myApi.deleteExamData(json_data[index][2],JSON.stringify(examData.value))
}

const test = () => {
  console.log(showData.value)
}

watch(
    () => dialogFormVisible.value,
    (newValue) => {
      // alert(dialogFormVisible.value)
    }
);

</script>


<style scoped>
.d1{
  text-align: right;
}
.d2{
border-bottom: lightgray 1px solid;
  border-radius: 20px;
}
.d3{
  text-align: right;
  color: gray;
  font-weight: bold;
}
.ic{
  color: red;
}
.ic1{
  color: rgb(0, 211, 154);
}
.ic2{
  color: rgb(255, 201, 40);
}
.label{
  background: linear-gradient(90deg, rgba(0,228,255,1) 0%, rgba(129,222,216,1) 100%);
  border-bottom-right-radius: 50px;
  color: white;
  font-weight: bolder;
}
.alink{
  text-decoration: none;
  color: white;
  font-weight: bold;
  font-size: small;
  padding: 5px;
  border-radius: 50px;
  background: linear-gradient(90deg, rgba(0,228,255,1) 0%, rgba(170,222,129,1) 100%);
}
.sp{
  font-size: smaller;
  color: gray;
}
.sp1{
  font-weight: bold;
  color: gray;
}
.btnd{
  text-align: right;
}
.div_drawer_1{
  overflow-y: scroll;
  border-radius: 20px;
  padding: 5px;
  background: #f5f6fa
}
.div_drawer_2{
  border-bottom: lightgray 1px solid;
  border-radius: 20px;
}
.div-detail{
  border-radius: 20px;
  background: white
}
.div-detail_1{
  padding: 10px;
}
.labelt {
  background: linear-gradient(90deg, rgba(0, 228, 255, 1) 0%, rgba(129, 222, 216, 1) 100%);
  border-bottom-right-radius: 50px;
  border-top-left-radius: 50px;
  color: white;
  font-weight: bolder;
}

.btn_delete{
  background: transparent;
  border: none;
  color: lightgray;
}

.btn_delete:hover{
  background: orange;
  color: white;
}


</style>